'use client'

import { useUserStore } from '@/store/user'
import {
	GroupOutlined,
	HomeOutlined,
	LogoutOutlined,
	MenuFoldOutlined,
	MenuUnfoldOutlined,
	MessageOutlined,
	UserOutlined,
} from '@ant-design/icons'
import { Avatar, Button, Layout, Menu, Popconfirm, Tooltip, theme } from 'antd'
import { usePathname, useRouter } from 'next/navigation'
import React, { useState } from 'react'

const { Header, Sider, Content } = Layout

export default function AdminLayout({ children }: { children: React.ReactNode }) {
	const router = useRouter()
	const pathname = usePathname()
	const [collapsed, setCollapsed] = useState(false)
	const { userInfo, clearUserInfo } = useUserStore()
	const {
		token: { colorBgContainer, borderRadiusLG },
	} = theme.useToken()

	const handleLogout = () => {
		clearUserInfo()
		router.replace('/login')
	}

	return (
		<Layout className="h-screen">
			<Sider
				trigger={null}
				collapsible
				collapsed={collapsed}
				width={240}
				collapsedWidth={80}
				className="transition-all duration-200 ease-in-out"
			>
				<Tooltip title={collapsed ? 'IM通讯系统管理端' : ''} placement="right">
					<div className="h-16 flex items-center justify-center">
						<div
							className={`flex items-center ${collapsed ? 'justify-center w-full' : 'gap-3 px-4'}`}
						>
							<HomeOutlined className="text-2xl text-white flex-shrink-0" />
							<h1
								className={`text-white text-lg whitespace-nowrap transition-all duration-200 ${
									collapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto'
								}`}
							>
								IM通讯系统管理端
							</h1>
						</div>
					</div>
				</Tooltip>
				<Menu
					theme="dark"
					mode="inline"
					selectedKeys={[pathname]}
					className="text-base"
					onClick={({ key }) => router.push(key)}
					items={[
						{
							key: '/admin/user',
							icon: <UserOutlined className="text-xl" />,
							label: <span className="text-base">用户管理</span>,
						},
						{
							key: '/admin/message',
							icon: <MessageOutlined className="text-xl" />,
							label: <span className="text-base">消息管理</span>,
						},
						{
							key: '/admin/group',
							icon: <GroupOutlined className="text-xl" />,
							label: <span className="text-base">群管理</span>,
						},
					]}
				/>
			</Sider>
			<Layout className="transition-all duration-200 ease-in-out">
				<Header
					style={{ padding: 0, background: colorBgContainer }}
					className="flex justify-between items-center"
				>
					<Button
						type="text"
						icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
						onClick={() => setCollapsed(!collapsed)}
						style={{
							fontSize: '16px',
							width: 64,
							height: 64,
						}}
					/>
					<div className="flex items-center gap-3 px-6">
						<span className="text-base">{userInfo?.nickname}</span>
						<Avatar size={40} src="/default-avatar.png" alt="avatar" />
						<Popconfirm
							title="确定退出系统吗？"
							onConfirm={handleLogout}
							okText="确定"
							cancelText="取消"
						>
							<Button type="link" icon={<LogoutOutlined />} danger>
								退出
							</Button>
						</Popconfirm>
					</div>
				</Header>
				<Content
					style={{
						margin: '24px 16px',
						padding: 24,
						minHeight: 280,
						background: colorBgContainer,
						borderRadius: borderRadiusLG,
					}}
				>
					{children}
				</Content>
			</Layout>
		</Layout>
	)
}
